import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {
    Layout,
    Button,
    Icon,
    Modal,
    message,
    Row,
    Col,
    Divider,
    Tabs,
    Table,
    InputNumber
} from 'antd';
const TabPane = Tabs.TabPane
import { OverPack } from 'rc-scroll-anim';
import TweenOne from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
import layout from 'antd/lib/layout/layout';

import {withRouter} from "react-router";
import './index.scss'
import IconShop from "../../images/shoppingCart.png";
import DetailsBar from '../../images/Detailbar2.png'
import DetailsBar2 from '../../images/Detailbar3.png'
import DetailsBar3 from '../../images/Detailbar4.png'
const {Header, Footer, Sider, Content} = Layout;

class Product_details extends React.Component {
   
    get_prod_id() {
        const {history} = this.props;
        const {search} = history.location;
        var reg = new RegExp("(^|&)prod_id=([^&]*)(&|$)", "i");
        const prod_id = search
            .substr(1)
            .match(new RegExp("^prod_id=([^prod_id]*)$", "i"))[1];
        return Number(prod_id);
    }

    /**
     * 统一处理 add/minus
     * @param {string} prodId production id
     * @param {number} new_count 新更改的需要同步到购物车的数量
     */
    handle_item_count_change(prodId, new_count) {
        const {handle_item_count_change} = this.props
        handle_item_count_change({prodId, new_count});

        message.config({
            top:100,
            duration:0.5
        })
        message.success('操作成功')

    }

    /**
     * Jump to shopping cart.
     */
    handle_shopping_cart_clicked() {
        const {history} = this.props;
        history.push('/shopping_cart');
       
    }


    render() {

        const {classes, current_brand_id, current_cls_id, shopping_cart} = this.props;

        const prod_id = this.get_prod_id();

        // 取对应产品
        const production = classes
            .find(cls => cls.id === current_cls_id)
            .brands
            .find(brand => brand.id === current_brand_id)
            .productions
            .find(production => production.id === prod_id)

        const count = (prod_id.toString() in shopping_cart.productions)
            ? shopping_cart.productions[prod_id.toString()].count
            : 0;

            // 非dom属性html
            var html = {
                __html:`<div >${production.brief}</div>`
            }
        return (
            
            <div>
              
          
                <Layout>

                    <Content
                        style={{
                        background: '#fff',
                        border: '10px solid #efefef'
                    }}>
                        <div className='box1'>
                            <div className='box2'>
                                {/* 产品名称、规格、价格、厂家、数量以及加入购物车 */}

                                <p className='p-box' style={{color:'#fff'}}>
                                    <b>{production.name}</b>
                                </p>
                            
                                {/* <h4 className='text-box'>规格：{production.attributes.split("#")[2].split("=")[1]}</h4> */}
                                <h4 className='text-box'>价格：{production.price}</h4>
                                <h4 className='text-box'>单位：{production.unit}</h4>
                              
                                <Row>
                                     <Divider>填写数量</Divider>
                                    <Col
                                        span={24}
                                        style={{
                                    
                                        color: '#e0201e'
                                    }}>
                                        <span >
                                        <div className='btn-numbox'>
                                    <h6 className='count'>数量：
                                        {/* <span
                                            className='num-jian'
                                            onClick={count > 0
                                            ? () => this.handle_item_count_change(prod_id.toString(), count - 1)
                                            : null}>-</span> */}

                                        <InputNumber type="text"  className='input-num' min={0} defaultValue={0} value={count} onChange={(count)=>{this.handle_item_count_change(prod_id.toString(), count)}} />

                                        {/* <span
                                            className='num-jia'
                                            onClick={() => this.handle_item_count_change(prod_id.toString(), count + 1)}>+</span> */}
                                    </h6>
                                </div>

                                        </span>
                                    </Col>
                                    <Col span={12} style={{marginLeft:'20px'}}>

                                        <div  style={{paddingTop:'10%'}}>

                                            <img
                                            onClick={(e)=>this.handle_shopping_cart_clicked(e)}
                                                style={{
                                                   
                                                    paddingTop:'1%',
                                                   
                                                    width: '30%'
                                            }}
                                                src={IconShop}
                                                alt=""/>
                                        </div>
                                    </Col>
                                </Row>

                            </div>
                            <div className='box3'>
                                <div className='box4'><img src={production.img_src} align="absmiddle" width="100%" height="100%"/></div>
                                {/* <hr/> */}
                                <div style={{textAlign:'center'}}>
                            <img src={DetailsBar3} alt=""/>
                            </div>
                                <div className='box5'>
                                    <div className='box6'><img src="http://placehold.it/350x150&text=BoTao" align="absmiddle" width="100%" height="100%"/></div>
                                    <div className='box7'><img src="http://placehold.it/350x150&text=BoTao" align="absmiddle" width="100%" height="100%"/></div>
                                    <div className='box8'><img src="http://placehold.it/350x150&text=BoTao" align="absmiddle" width="100%" height="100%"/></div>
                                </div>
                            </div>
                        </div>
                    </Content>
                    <Footer
                        style={{
                        border: '10px solid #efefef',
                        background: '#fff'
                    }}>
                        <div className='box11'>
                        <Tabs defaultActiveKey='1' animated={true} type='card' >
                            <TabPane tab='产品详情' key='1'>
                            <div style={{textAlign:'center'}}>
                            <img src={DetailsBar} alt=""/>
                         
                            </div>  
                            <div  dangerouslySetInnerHTML={html} align="center"></div>                          
                              <div className='box13'><img src={production.img_src} align="absmiddle" width="100%" height="100%"/></div>
                              <div className='box14'><img src="http://placehold.it/350x150&text=BoTao" align="absmiddle" width="100%" height="100%"/></div>                                       
                              </TabPane>
                            <TabPane tab='详细参数' key='2'>
                            <div style={{}}>
                            <img src={DetailsBar2} alt=""/>
                            </div>
                            { production.brief===''?
                                       <table className="table table-bordered">
                                       <caption>波涛</caption>
                                       <thead>
                                            <tr>
                                                <th>项目</th>
                                                <th>参数</th>
                                            </tr>
                                       </thead>
                                       <tbody>
                                       {
                                               production.attributes.indexOf('型号')>1? 
                                             <tr>
                                               <td>型号</td>
                                               <td>{production.attributes.substr(production.attributes.indexOf('型号')).split("#")[0].split('=')[1]}</td>
                                           </tr>
                                               :  <tr></tr>
                                           }
                                           {
                                               production.attributes.indexOf('颜色')>1? 
                                             <tr>
                                               <td>颜色</td>
                                               <td>{production.attributes.substr(production.attributes.indexOf('颜色')).split("#")[0].split('=')[1]}</td>
                                           </tr>
                                               :  <tr></tr>
                                           }
                                           {
                                               production.attributes.indexOf('产地')>1? 
                                             <tr>
                                               <td>产地</td>
                                               <td>{production.attributes.substr(production.attributes.indexOf('产地')).split("#")[0].split('=')[1]}</td>
                                           </tr>
                                               :  <tr></tr>
                                           }
                                           {
                                               production.attributes.indexOf('规格')>-1? 
                                             <tr>
                                               <td>规格</td>
                                               <td>{production.attributes.substr(production.attributes.indexOf('规格')).split("#")[0].split('=')[1]}</td>
                                           </tr>
                                               :  <tr></tr>
                                           }
                                          
                                          {
                                               production.attributes.indexOf('材质')>1? 
                                             <tr>
                                               <td>材质</td>
                                               <td>{production.attributes.substr(production.attributes.indexOf('材质')).split("#")[0].split('=')[1]}</td>
                                           </tr>
                                               : <tr></tr>
                                           }
                                          
                                           </tbody>
                                       </table>:
                                    <div dangerouslySetInnerHTML={html}></div>
                                    }
             
                             </TabPane>
                        </Tabs>
                      
                           
                       

                        </div>
                    </Footer>
                </Layout>
             
     
            </div>
  
        )
    }

}

export default withRouter(Product_details)